<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('申请事项')" prop="actTitle">
            <el-input v-model="form.actTitle" :placeholder="$t('申请事项')" :maxlength="100" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('申请人')" prop="applicant">
            <userSelect
              v-model="form.applicant"
              :placeholder="$t('申请人')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('申请时间')" prop="applicationTime">
            <DatePicker v-model="form.applicationTime" :placeholder="$t('申请时间')" />
          </el-form-item>
        </el-col>
        <el-col v-if="wfMattersProcessList.length > 0" :span="12">
          <el-form-item :label="$t('事项类型')" prop="type">
            <el-select v-model="form.type" :placeholder="$t('请选择')" filterable @change="findProcessKey()">
              <el-option
                v-for="process in wfMattersProcessList"
                :key="process.id"
                :label="$t(process.mattersName)"
                :value="process.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('备注')" prop="remark">
            <el-input v-model="form.remark" type="textarea" :rows="8" :placeholder="$t('备注')" maxlength="2000" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 附件列表 -->
      <FileTable :list.sync="form.fileList" data-type="oa_matters" :btn-show="!otherBtnHide" />
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 10px">
      <FormBtn ref="formBtn" has-permi="oa:matters" :menu-key="menuKey" :process-key="processKey" :bus-data="form" :btn-hide="btnHide" />
    </div>
  </div>
</template>

<script>
    import { saveOaMatters, getOaMatters } from '@/api/oa/matters/oaMatters'
    import { getUserProfile } from '@/api/system/user'
    import { allListWfMattersProcess } from '@/api/act/mattersProcess/wfMattersProcess'

    export default {
      name: 'OaMatterForm',
      components: {
      },
      data() {
        return {
          openLocation: undefined,
          // 菜单标识
          menuKey: 'oaMatters',
          // 流程标识
          processKey: undefined,
          // 是否隐藏保存按钮
          btnHide: false,
          // 是否隐藏其它按钮
          otherBtnHide: false,
          // 表单参数
          form: {
            // 附件列表
            fileList: []
          },
          // 事项流程集合数据
          wfMattersProcessList: [],
          // 遮罩层
          loading: false,
          // 表单校验
          rules: {
            actTitle: [
              { required: true, message: this.$t('必填信息'), trigger: 'blur' }
            ], applicant: [
              { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
            ], applicationTime: [
              { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
            ]
          },
          // 操作按钮默认不展示
          buttonShow: true
        }
      },
      mounted() {
          this.$bus.$emit('async_done')
      },
      created() {
        // 获取事项流程数据
        allListWfMattersProcess().then(response => {
          this.wfMattersProcessList = response.rows
        })
      },
      methods: {
          // 初始化数据
          init(data) {
            this.loading = true
            if (data != null && data.id !== undefined && data.id !== '' && data.id !== null) {
              this.buttonShow = false
              // 根据ID查询数据
              getOaMatters(data.id).then(response => {
                this.form = response.data
                if (response.data.actStatus !== 'D' && response.data.actStatus !== 'W') {
                    this.buttonShow = true
                }
                this.loading = false
              })
            } else {
              this.loading = false
              this.reset()
              getUserProfile().then(response => {
                this.form.applicant = response.data.id
                this.loading = false
              })
              // 新建时展示操作按钮
            }
          },
          // 表单重置
          reset() {
            this.form = {
              id: undefined,
              procDefKey: undefined,
              createBy: undefined,
              createTime: undefined,
              updateBy: undefined,
              updateTime: undefined,
              delFlag: undefined,
              applicant: undefined,
              applicationTime: this.parseTime(new Date()),
              menu: {
                id: undefined
              },
              fileList: []
            }
            this.resetForm('form')
          },
          // 关闭form页面
          closeForm() {
              // 关闭form页面遮罩层
              this.loading = false
              // 关闭form页面
              if (this.$parent.$parent.formOpen !== undefined) {
                this.$parent.$parent.formOpen = false
              }
              // 刷新list页面
              if (this.$parent.$parent.getList !== undefined) {
                this.$parent.$parent.getList()
              }
          },
         // 查询流程标识
        findProcessKey() {
          if (this.wfMattersProcessList.length > 0) {
            this.wfMattersProcessList.forEach(wfMattersProcess => {
              if (wfMattersProcess.id === this.form.type) {
                this.processKey = wfMattersProcess.processKey
              }
            })
          }
        },
          /** 提交按钮 */
          submitForm: function(type) {
            return new Promise((resolve, reject) => {
              this.$refs['form'].validate(valid => {
                // 验证数据
                if (valid) {
                  this.loading = true
                  // 保存数据
                  saveOaMatters(this.form).then(response => {
                    if (response.code === 200) {
                      if (type === 'process') {
                        // 设置数据id方式启动流程后取消并再次启动会创建多条记录
                        this.form.id = response.data
                        // 启动流程
                        this.startProcess(response.data)
                      } else {
                        this.msgSuccess(this.$t('保存成功'))
                        this.closeForm()
                      }
                      resolve()
                    } else {
                      this.msgError(response.msg)
                      this.loading = false
                      reject()
                    }
                  }).catch(() => {
                    this.loading = false
                  })
                } else {
                  reject()
                  this.locationError(document)
                }
              })
            })
          },
        // 启动流程
        startProcess: function(dataId) {
          this.loading = false
          // 启动流程时候传入的参数
          const processData = {}
          // 待办标题
          processData.title = this.form.actTitle
          // 业务表名
          processData.dataTable = 'oa_matters'
          // 业务ID
          processData.dataId = dataId
          // 业务表单地址
          processData.formPath = '@/views/oa/matters/oaMattersForm'

          // 业务表单打印地址
          processData.viewPath = '@/views/oa/matters/oaMattersView'

          // 菜单标识(根据菜单标识判断的走哪个流程)
          processData.menuKey = this.menuKey
          // 流程标识
          if (this.wfMattersProcessList.length > 0) {
            this.wfMattersProcessList.forEach(wfMattersProcess => {
              if (wfMattersProcess.id === this.form.type) {
                processData.processKey = wfMattersProcess.processKey
              }
            })
          }
          this.startProcessByMenu(processData, () => {
            this.form.actStatus = 'D'
            this.msgSuccess(this.$t('数据保存成功,流程启动成功'))
            this.closeForm()
          })
        }

      }

    }
</script>
